<template>
  <a-modal
    :title="title"
    width="50%"
    :visible="visible"
    @cancel="close"
  >
    <a-button slot="footer" @click="close">关闭</a-button>
    <a-row :gutter="[0,24]">
      <a-col>
        <a-alert message="表单提交规则继承抽象类FormSubmitRule；分支选择规则继承抽象类CompleteTaskRule；流程准入规则继承抽象类AccessRule"
                 style="margin-bottom: 10px"></a-alert>
        <a-alert message="可左右栏拖动规则，并拖拽排序，系统将按顺序执行。"></a-alert>
      </a-col>
    </a-row>
    <a-row :gutter="[0,24]">
      <a-col span="12">
        <h3>未使用规则</h3>
        <a-card :bordered="false">
          <draggable class="list-group" :list="listUnused" group="ruleGroup" @change="change" ghostClass="ghost">
            <a-card v-for="(element, index) in listUnused" :title="element.name" size="small"
                    style="margin-bottom: 10px"
                    :key="element.name">
              <a slot="extra" @click="addToUsed(element)">添加</a>
              {{ element.desc }}
            </a-card>
          </draggable>
        </a-card>
      </a-col>
      <a-col span="12">
        <h3>已使用规则</h3>
        <a-card :bordered="false">
          <draggable class="list-group" :list="listUsed" group="ruleGroup" @change="change" ghostClass="ghost">
            <a-card v-for="(element, index) in listUsed" :title="(index + 1) + '-' + element.name" size="small" style="margin-bottom: 10px"
                    :key="element.name">
              <a slot="extra" @click="removeFromUsed(element)">移除</a>
              {{ element.desc }}
            </a-card>
          </draggable>
        </a-card>
      </a-col>
    </a-row>
  </a-modal>
</template>
<script>

import draggable from "vuedraggable";

export default {
  name: "FlowRulePluginConfig",
  components: {
    draggable
  },
  props: {
    ruleList: {
      type: Array,
      required: false,
      default:  () => []
    }
  },
  model: {
    prop: 'ruleList',
    event: 'change'
  },
  data() {
    return {
      visible: false,
      title: 'FlowRulePluginConfig',
      ruleType: '',
      listUnused: [],
      listUsed: [],
      listAllData: [],
    };
  },
  methods: {
    addToUsed(item) {
      this.listUnused.splice(this.listUnused.findIndex(i => item.name === i.name), 1)
      this.listUsed.push(item);
      this.change()
    },
    removeFromUsed(item) {
      this.listUsed.splice(this.listUsed.findIndex(i => item.name === i.name), 1)
      this.listUnused.push(item);
      this.sortUnused()
      this.change()
    },
    sortUnused() {
      this.listUnused.sort((m, n) => m.name > n.name ? 1 : -1)
    },
    close() {
      this.visible = false
    },
    edit(title, ruleType) {
      this.title = title
      this.ruleType = ruleType
      this.loadData()
      this.visible = true
    },
    loadData() {
      this.$get('/process/design/pluginRules/' + this.ruleType).then(res => {
        if (res.data.status) {
          this.listAllData = res.data.data

          this.listUsed = [];
          this.listUnused = [];
          //把listAllData按ruleList划分"已使用"和"未使用"
          let usedSet = new Set(this.ruleList)
          let listUsedSet = new Set(Object.keys(this.listAllData).filter(x => usedSet.has(x)))
          for (let i in this.listAllData) {
            if (listUsedSet.has(i)) {
              this.listUsed.push({
                name: i,
                desc: this.listAllData[i]
              })
            } else {
              this.listUnused.push({
                name: i,
                desc: this.listAllData[i]
              })
            }
          }
          this.sortUnused()
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    change(evt) {
      //把listUsed精简到ruleList
      let result = []
      this.listUsed.forEach(i => result.push(i.name))
      this.$emit("change", result)
    }
  }
};
</script>

<style scoped>
.flip-list-move {
  transition: transform 0.5s;
}

.no-move {
  transition: transform 0s;
}

.ghost {
  opacity: 0.5;
}
</style>
